<template>
  <CustomNav title="时光锦汉服体验店"></CustomNav>
  <view class="container">
    <view class="allOrder">
      <view>已选套餐</view>
      <view>陕西工院店/大唐不夜城点</view>
    </view>

    <view class="orderContent">
      <view class="order">
        <view class="edit" @click="handleEdit">
          <i class="iconfont icon-bianji"></i>
        </view>
        <view class="info">
          <view class="left">
            <u-image
              :show-loading="true"
              src="https://img1.baidu.com/it/u=3372575275,97853616&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=752"
              width="160rpx"
              height="160rpx"
            ></u-image>
            <view class="basicInfo">
              <view class="top">
                <view class="name">
                  <!-- <view>套餐名称+装造+摄影+xxxx</view> -->
                  <view
                    >{{ appointmentStore.appointmentService }}+装造+摄影</view
                  >
                  <view>￥169.0</view>
                </view>
                <view class="count">X1</view>
              </view>
              <view class="quantity"
                >{{ appointmentStore.appointmentQuantity }}人</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="infoContainer" v-if="homeStore.showStatus">
      <view class="textInfo">预约人信息</view>
      <view class="inputBox">
        <view class="text">预约人</view>
        <view class="ipt">
          <view class="input">
            <input
              placeholder="请输入预约人"
              v-model.trim="appointmentStore.contacts"
            />
          </view>
        </view>
      </view>
      <view class="inputBox" v-if="homeStore.showStatus">
        <view class="text">手机号</view>
        <view class="ipt">
          <view class="input">
            <input
              placeholder="请输入手机号"
              v-model.trim="appointmentStore.contactNumber"
            />
          </view>
        </view>
      </view>
      <view class="inputBox" v-if="homeStore.showStatus">
        <view class="text">时间</view>
        <view class="ipt">
          <view class="input">
            <input
              placeholder="请输入时间"
              v-model.trim="appointmentStore.serviceTime"
            />
          </view>
        </view>
      </view>
    </view>

    <view class="warn">
      <view class="warning">*</view>
      <view class="title">商家接单后，需提交定金为100元</view>
    </view>
  </view>

  <view class="schedule" @click="submitAppointment">提交预约</view>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import useAppointmentStore from "@/store/modules/appointment";
import { Alert, unAlert } from "@/utils/tool";
import { submitOrder } from "@/api/appointment/index";
import useHomeStore from "@/store/modules/home";
import { getItem } from "@/utils/localStorage";
import verify from "@/utils/verify";

const appointmentStore = useAppointmentStore();

const homeStore = useHomeStore();

// 编辑
const handleEdit = () => {
  uni.navigateTo({
    url: "/pagesA/appointment/index",
  });
};

// 订单预约
const submitAppointment = async () => {
  if (!verify()) {
    return;
  }

  const app = appointmentStore.testVal();

  // 校验成功
  if (app == "ok") {
    const {
      appointmentService,
      serviceTime,
      contacts,
      contactNumber,
      appointmentQuantity,
      appointmentServiceId,
    } = appointmentStore;

    // console.log("appointmentServiceId:", appointmentServiceId);

    Alert("加载中...", "loading", 0, true);

    const object = {
      packageId: appointmentServiceId,
      nickname: contacts,
      phone: contactNumber,
      personNumber: appointmentQuantity,
      appointTime: serviceTime,
      shopId: getItem("userInfo").shopId,
      quantity: 1, // 默认为1
      userId: getItem("userInfo").id,
    };

    console.log("object:", object);

    // 发请求
    const result = await submitOrder(object);

    console.log("提交result:", result);

    if (result.data.code == 200) {
      appointmentStore.updateAppointmentOrder(object);
      uni.navigateTo({
        url: "/pagesA/appointmentSuccess/index",
      });

      unAlert();
    } else {
      Alert("预约失败", "error", 1500, true);
    }

    console.log("result：", result);
  }

  // 模拟预约成功
  // if (app == "ok") {
  //   const {
  //     appointmentService,
  //     serviceTime,
  //     contacts,
  //     contactNumber,
  //     appointmentQuantity,
  //   } = appointmentStore;

  //   const object = {
  //     packageId: 7,
  //     nickname: contacts,
  //     phone: contactNumber,
  //     personNumber: appointmentQuantity,
  //     appointTime: serviceTime,
  //     shopId: 1,
  //     quantity: 1,
  //   };

  //   appointmentStore.updateAppointmentOrder(object);
  //   uni.navigateTo({
  //     url: "/pagesA/appointmentSuccess/index",
  //   });

  //   unAlert();
  // }
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #efefef;
  min-height: 90vh;
  padding: 0 30rpx;
  padding-bottom: 40rpx;

  .allOrder {
    display: flex;
    justify-content: space-between;
    padding-top: 50rpx;

    view {
      font-size: 28rpx;
      font-weight: 700;
    }
  }

  .orderContent {
    margin-top: 50rpx;

    .order {
      margin-top: 20rpx;

      .edit {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10rpx;

        .iconfont {
          font-size: 40rpx;
          font-weight: 800;
          color: #000;
        }
      }

      .info {
        display: flex;

        .left {
          width: 100%;
          display: flex;
          justify-content: space-between;

          .basicInfo {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 10rpx;

            .top {
              display: flex;
              flex-direction: column;

              .name {
                display: flex;
                flex: 1;
                justify-content: space-between;

                view {
                  font-size: 28rpx;
                }
              }

              .count {
                display: flex;
                justify-content: flex-end;
                font-size: 26rpx;
                margin-top: 10rpx;
              }
            }

            .quantity {
              font-size: 28rpx;
              margin-bottom: 10rpx;
            }
          }
        }
      }
    }
  }

  .infoContainer {
    margin-top: 120rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    .textInfo {
      margin-bottom: 20rpx;
    }

    .inputBox {
      width: 100%;
      display: flex;
      align-items: center;
      border: 1px solid #fbda97;
      border-radius: 12rpx;
      padding: 20rpx 55rpx;
      padding-right: 0;
      margin-bottom: 16rpx;

      .text {
        width: 130rpx;
      }

      .ipt {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        padding-left: 10rpx;
        padding-right: 40rpx;

        .input {
          flex: 1;

          input {
            font-size: 28rpx;
            color: #9b9b9b;
          }
        }
      }
    }
  }

  .warn {
    display: flex;
    padding: 25rpx 30rpx;
    .warning {
      color: $btn;
    }
    .title {
      color: #9c9c9c;
    }
  }
}

.schedule {
  width: 70%;
  display: inline-block;
  padding: 20rpx 130rpx;
  border-radius: 20rpx;
  color: #fff;
  font-size: 42rpx;
  background-color: $btn;
  position: fixed;
  bottom: 150rpx;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
</style>
